<template>
  <div class="hot-sessions-container">
    <h3 class="table-title">热门场次</h3>
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
      stripe
    >
      <el-table-column prop="id" label="ID" width="80" align="center" />
      <el-table-column label="主图" width="120" align="center">
        <template #default>
          <el-image
            style="width: 80px; height: 45px"
            src="https://tse1-mm.cn.bing.net/th/id/OIP-C.IvpxALFBzJExR4F7Npkw4QHaFj?r=0&rs=1&pid=ImgDetMain&cb=idpwebp1&o=7&rm=3"
            fit="cover"
          />
        </template>
      </el-table-column>
      <el-table-column prop="session" label="场次" style="width: 50" />
      <el-table-column prop="price" label="单价" width="120" align="right">
        <template #default="{ row }">
          <span class="price-text">{{ row.price }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
interface SessionItem {
  id: number
  session: string
  price: string
}

const tableData: SessionItem[] = [
  { id: 1, session: '爱奇艺会员月卡9折优惠', price: '¥19.9' },
  { id: 2, session: '爱奇艺会员月卡9折优惠', price: '¥19.9' },
  { id: 3, session: '爱奇艺会员月卡9折优惠', price: '¥19.9' },
  { id: 4, session: '爱奇艺会员月卡9折优惠', price: '¥19.9' },
  { id: 5, session: '爱奇艺会员月卡9折优惠', price: '¥19.9' },
  { id: 6, session: '爱奇艺会员月卡9折优惠', price: '¥19.9' },
  { id: 7, session: '爱奇艺会员月卡9折优惠', price: '¥19.9' }
]
</script>

<style scoped>
.hot-sessions-container {
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

}

.table-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}


:deep(.el-table th) {
  font-weight: 600;
}

:deep(.el-table .cell) {
  padding-left: 12px;
  padding-right: 12px;
}
</style>
